<!--
 @description 客户-筛选条件
 @fileName FilterItem.vue
 @author zengqiongying
 @created 2022/11/18 13:52:37
-->
<template>
  <div class="card">
    <template v-if="poolType===0">
      <!-- 公共客户池 -->
      <div class="filter-item">
        <div class="item-title mb8">
          <span>一级来源</span>
        </div>
        <div class="filter-field">
          <LabelSelect
            v-model="formData.disCustomerFirstSource"
            url="/data-dict/app/v2/dictionary/DIS_CUSTOMER_PRIMARY_SOURCE"
            label-name="dictName"
            value-name="dictCode"
            method="get"
            :params=" { query: {
              domainCode:'marketing',
              appCode:'top2-crm'
            }, type: 1 }"
            :multiple="false"
          />
        </div>
      </div>

      <div v-if="!!(formData.disCustomerFirstSource)" class="filter-item">
        <div class="item-title mb8">
          <span>二级来源</span>
        </div>
        <div class="filter-field">
          <LabelSelect
            v-model="formData.disCustomerSecondSource"
            url="/data-dict/app/v2/dictionary/child"
            label-name="dictName"
            value-name="dictCode"
            method="post"
            :params=" { query: {
              domainCode:'marketing',
              appCode:'top2-crm',
              parentDictTypeCode:'DIS_CUSTOMER_PRIMARY_SOURCE',
              parentDictCode:formData.disCustomerFirstSource,
            }, type: 2 }"
            :multiple="false"
            must-pid
            :parent-id="formData.disCustomerFirstSource"
          />
        </div>
      </div>
    </template>
    <template v-if="([0,2].includes(status) && poolType===0) || ([1,2].includes(poolType))">
      <!-- 公共(已分配，全部)| 意向 | 潜客 -->
      <div class="filter-item">
        <div class="item-title mb8">
          <span>跟进状态</span>
        </div>
        <div>
          <LabelSelect
            v-model="formData.followUpState"
            label-name="dictName"
            value-name="dictCode"
            :option-data="[
              {dictName:'全部',dictCode:''},
              {dictName:'待跟进',dictCode:'WaitFollowUp'},
              {dictName:'三天未跟进',dictCode:'ThreeDaysNoFollowUp'},
              {dictName:'其他未跟进',dictCode:'SevenDaysNoFollowUp'},
            ]"
          />
        </div>
      </div>

      <div class="filter-item">
        <div class="item-title mb8">
          <span>活跃排序</span>
        </div>
        <div>
          <LabelSelect
            v-model="formData.sortType"
            title="活跃排序"
            :option-data="[
              {dictName:'活跃时间',dictCode:'lastActiveTime'},
              {dictName:'跟进时间',dictCode:'lastFollowupTime'}
            ]"
            value-name="dictCode"
            label-name="dictName"
          />
        </div>
      </div>
    </template>

    <div class="filter-item">
      <div class="item-title mb8">
        <span>客户标签</span>
        <!-- <div @click.stop="isFold=!isFold">
          <span>{{ isFold?'更多':'收起' }}</span>
          <svg-icon :icon-class="isFold?'xiangxia-zhankai-line':'xiangshang-shouqi-line'" />
        </div> -->
      </div>
      <div>
        <LabelSelect
          v-model="formData.labelIdOr"
          url="/app/v1/label/dis/page"
          label-name="name"
          value-name="id"
          method="post"
          :params=" { query: {enable:1}, type: 0 }"
          :headers="{
            'Permission-PerCode': poolType === 0 ? 'common_customer_pool' : 'my_customer_pool',
            'Permission-App': 'top2-crm-app'
          }"
          multiple
        />
      </div>
    </div>

    <!-- <div class="filter-item">
      <div class="item-title mb8">
        <span>自定义标签</span>
      </div>
      <div>
        <LabelSelect
          v-model="formData.customLables"
          :url="`/data-dict/app/v2/dictionary/CRM_DECORATION_PROGRESS`"
          label-name="dictName"
          value-name="dictCode"
          method="get"
          :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
          multiple
        />
      </div>
    </div> -->

    <template v-if="([0,2].includes(status) && poolType===0) || ([1,2].includes(poolType))">
      <!-- 公共(已分配，全部)| 意向 | 潜客 -->
      <template v-if="!([1,2].includes(poolType))">
        <div class="filter-item">
          <div class="item-title">
            <span>家居顾问</span>
          </div>
          <div class="filter-field">
            <FieldSelect
              v-model="formData.shoppingGuideEmployeeId"
              is-input
              hide-title
              title="家居顾问"
              placeholder="请选择"
              :url="`/app/v1/employee/page`"
              label-name="name"
              value-name="id"
              method="post"
              :params=" { query:{}, type: 0 }"
              :params-raw="{ positionCodes: ['top_shopping_guide', 'top_shop_mg']}"
              clear
              :border="false"
              icon-direction="down"
              input-align="left"
              cell-class-name="custom-field"
            />
          </div>
        </div>

        <!-- <div class="filter-item">
        <div class="item-title">
          <span>家居顾问</span>
        </div>
        <div class="filter-field">
          <van-field v-model="formData.guideName" class="custom-field" label="" placeholder="请输入" clearable />
        </div>
      </div> -->

        <div class="filter-item">
          <div class="item-title">
            <span>设计师</span>
          </div>
          <div class="filter-field">
            <FieldSelect
              v-model="formData.designerEmployeeId"
              is-input
              hide-title
              title="设计师"
              placeholder="请选择"
              :url="`/app/v1/employee/page`"
              label-name="name"
              value-name="id"
              method="post"
              :params=" { query: {}, type: 0 }"
              :params-raw="{ positionCodes:['top_design_mg', 'top_designer']}"
              clear
              :border="false"
              icon-direction="down"
              input-align="left"
              cell-class-name="custom-field"
            />
          <!-- disOrgCodes:'' -->
          </div>
        </div>
      </template>

      <div v-if="poolType!==1" class="filter-item">
        <div class="item-title">
          <span>商机阶段</span>
        </div>
        <div class="filter-field">
          <LabelSelect
            v-model="formData.optyStage"
            :option-data="[
              {dictName:'未创建',dictCode:'NoCreate'},
              {dictName:'进行中',dictCode:'Doing'},
              {dictName:'完结',dictCode:'Finished'}
            ]"
            label-name="dictName"
            value-name="dictCode"
          />
        </div>
      </div>
    </template>

    <template v-if="([0,1,2].includes(status) && poolType===0) || ([1,2].includes(poolType))">
      <!-- 公共(待分配，已分配，全部)| 意向 | 潜客 -->
      <div class="filter-item">
        <div class="item-title">
          <span>建档时间</span>
        </div>
        <div class="filter-field">
          <FieldCalendarTime
            v-model="formData.filingTime"
            title="建档时间"
            type="datetimerange"
            icon-position="left"
            clear
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
      <div v-if="poolType!==1" class="filter-item">
        <div class="item-title mb8">
          <span>是否退回</span>
        </div>
        <div>
          <LabelSelect
            v-model="formData.isFollowReturn"
            :option-data="[
              {label:'是',value:1},
              {label:'否',value:0}
            ]"
            value-name="value"
            label-name="label"
          />
        </div>
      </div>
    </template>

    <template v-if="poolType===0">
      <!-- 公共：失效筛选-流失时间 -->
      <div v-if="status===3" class="filter-item">
        <div class="item-title">
          <span>流失时间</span>
        </div>
        <div class="filter-field">
          <FieldCalendarTime
            v-model="formData.lastFailureTime"
            title="流失时间"
            type="datetimerange"
            icon-position="left"
            clear
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>

      <div class="filter-item">
        <div class="item-title">
          <span>最后一次跟进时间</span>
        </div>
        <div class="filter-field">
          <FieldCalendarTime
            v-model="formData.lastFollowupTime"
            title="最后一次跟进时间"
            type="datetimerange"
            icon-position="left"
            clear
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
    </template>

    <div class="filter-item">
      <div class="item-title mb8">
        <span>查询范围</span>
      </div>
      <div>
        <LabelSelect
          v-model="formData.shopDeptCode"
          :url="`/app/v1/organization/dis/queryMySaleDeptInTenant`"
          label-name="orgName"
          value-name="orgCode"
          method="get"
          :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
          multiple
        />
      </div>
    </div>

    <div v-if="poolType!==1" class="filter-item">
      <!-- 非潜客 -->
      <div class="item-title mb8">
        <span>客户需求</span>
      </div>
      <div>
        <LabelSelect
          v-model="formData.categorySelectionOr"
          :url="`/data-dict/app/v2/dictionary/CRM_CATEGORY_SELECTION`"
          label-name="dictName"
          value-name="dictCode"
          method="get"
          :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
          multiple
          :includes="disConfCategorySelection"
        />
      </div>
    </div>
    <div v-if="poolType===1" class="filter-item">
      <!-- 仅潜客 -->
      <div class="item-title mb8">
        <span>是否获尺</span>
      </div>
      <div>
        <LabelSelect
          v-model="formData.isMeasured"
          :option-data="[
            {label:'是',value:1},
            {label:'否',value:0}
          ]"
          value-name="value"
          label-name="label"
        />
      </div>
    </div>

    <template v-if="([0,2].includes(status) && poolType===0) || poolType===2">
      <!-- 公共(已分配，全部)| 意向  -->
      <div class="filter-item">
        <div class="item-title mb8">
          <span>品类节点</span>
        </div>
        <div>
          <!-- <LabelSelect
            v-model="formData.optyCategoryStage"
            :option-data="optyCategoryStageList"
            label-name="dictName"
            value-name="dictCode"
          /> -->
          <LabelSelect
            v-model="formData.optyCategoryStage"
            :url="`/data-dict/app/v2/dictionary/CRM_OPTY_CP_CATEGORY_STAGE`"
            label-name="dictName"
            value-name="dictCode"
            method="get"
            :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
          />
        </div>
      </div>

      <div class="filter-item">
        <div class="item-title mb8">
          <span>是否进店</span>
        </div>
        <div>
          <LabelSelect
            v-model="formData.isEnterStore"
            :option-data="[
              {dictName:'是',dictCode:1},
              {dictName:'否',dictCode:0}
            ]"
            label-name="dictName"
            value-name="dictCode"
          />
          <!-- <LabelSelect
            v-model="formData.isEnterStore"
            :url="`/data-dict/app/v2/dictionary/CRM_COMMON_BOOLEAN`"
            label-name="dictName"
            value-name="dictCode"
            method="get"
            :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
            :multiple="false"
          /> -->
        </div>
      </div>
      <!-- <template v-if="status===2 && poolType===0">
        <div class="filter-item">
          <div class="item-title mb8"><span>是否欠款</span></div>
          <div>
            <LabelSelect
              v-model="formData.isDebt"
              :option-data="[
                {label:'是',value:1},
                {label:'否',value:0}
              ]"
              value-name="value"
              label-name="label"
            />
          </div>
        </div>
        <div class="filter-item">
          <div class="item-title mb8"><span>是否交款</span></div>
          <div>
            <LabelSelect
              v-model="formData.isPay"
              :option-data="[
                {label:'是',value:1},
                {label:'否',value:0}
              ]"
              value-name="value"
              label-name="label"
            />
          </div>
        </div>
      </template> -->

      <div class="filter-item">
        <div class="item-title mb8">
          <span>客户类型</span>
        </div>
        <div>
          <LabelSelect
            v-model="formData.clueCustomerType"
            :url="`/data-dict/app/v2/dictionary/CRM_CUSTOMER_TYPE`"
            label-name="dictName"
            value-name="dictCode"
            method="get"
            :params=" { query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
            :multiple="false"
          />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import LabelSelect from '@/components/LabelSelect'
import FieldCalendarTime from '@/components/FieldCalendarTime'
import FieldSelect from '@/components/FieldSelect'
import FieldPicker from '@/components/FieldPicker'
import { getDictList } from '@/apis/dataDict'
import { distributorConfigCategoryByDisCode } from '@/apis/customer'
export default {
  name: 'CustomerFilterItem',
  components: { LabelSelect, FieldCalendarTime, FieldSelect, FieldPicker },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    poolType: {
      // 客户池类型： 0 公告客户池 , 1 潜在客户， 2 意向客户
      type: Number,
      default: 0
    },
    status: {
      // 公共客户池状态：1 未分配 ， 2 已分配 ， 3 失效  ，0 全部
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      optyCategoryStageList: [], // 品类节点
      disConfCategorySelection: [], // 经销商类目
      isFold: false,
      formData: {
        disCustomerFirstSource: '', // 一级来源(公共客户池 filtersRaw)
        disCustomerSecondSource: '', // 二级来源(公共客户池 filtersRaw)
        labelIdOr: [], // 客户标签
        customLables: [], // 自定义标签
        lastFollowupTime: [], // 跟进时间 (filtersRaw)
        filingTime: [], // 建档时间 (filtersRaw)
        isFollowReturn: '', // 是否退回 (filtersRaw)
        shopDeptCode: [], // 查询范围(销售门店)(filtersRaw)
        categorySelectionOr: [], // 客户需求

        // 已分配和全部状态独有筛选条件
        followUpState: '', // 跟进状态
        sortType: '', // 活跃排序

        shoppingGuideEmployeeId: '', // 家具顾问Id
        designerEmployeeId: '', // 设计师ID
        optyStage: '', // 商机阶段

        optyCategoryStage: '', // 品类节点
        isEnterStore: '', // 是否进店(filtersRaw)
        clueCustomerType: '', // 客户类型(filtersRaw)

        // 已分配状态独有的查询字段
        isDebt: '', // 是否欠款（弃用）
        isPay: '', // 是否交款（弃用）

        // 流失客户独有查询字段
        lastFailureTime: [], // 流失时间 (filtersRaw)
        lastFollowupTime: [], // 最后一次跟进时间 (filtersRaw)

        isMeasured: '' // 是否获尺
      }
    }
  },
  watch: {
    formData: {
      handler(v) {
        this.$emit('input', v)
      },
      deep: true,
      immediate: true
    },
    status: {
      handler(val) {
        this.clearFormData()
      },
      immediate: true
    },
    poolType: {
      handler(v) {
        this.clearFormData()
      },
      immediate: true
    },
    'formData.disCustomerFirstSource'(v) {
      this.$set(this.formData, 'disCustomerSecondSource', '')
    }
  },

  async created() {
    // this.getDictData()
    this.disConfCategorySelection = await distributorConfigCategoryByDisCode()
  },
  activated() {},

  mounted() {},

  methods: {
    async getDictData() {
      const data1 = await getDictList('CRM_OPTY_FP_CATEGORY_STAGE')
      const data2 = await getDictList('CRM_OPTY_CP_CATEGORY_STAGE')
      this.optyCategoryStageList = [...(data1 || []), ...(data2 || [])]
    },
    clearFormData() {
      for (const [k, v] of Object.entries(this.formData)) {
        const isArry = v instanceof Array
        const value = isArry ? [] : ''
        this.$set(this.formData, k, value)
      }
    },
    resetData(src) {
      for (const [k, v] of Object.entries(this.formData)) {
        const value = src[k]
        const isArry = v instanceof Array
        let newVal = ''
        if (isArry) {
          // newVal = (value && value instanceof Array && value.length > 0) ? value : []
          newVal = []
        } else {
          // newVal = [null, undefined, ''].includes(value) ? '' : value
          newVal = ''
        }
        this.$set(this.formData, k, newVal)
      }
    }
  }
}

</script>
<style lang='less' scoped>
  .filter-item{
    margin-top: 16px;
    .item-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 16px;
      &.mb8{
        margin-bottom: 8px;
      }
      &>span{
        color:#333333;
        font-size: 12px;
        font-weight: bold;
      }
      &>div{
        color: #888;
        font-size: 12px;
        &>svg{
          color: inherit;
          font-size: inherit;
          margin-left: 2px;
        }
      }
    }
    .filter-field{
      padding: 0 8px 0 10px;
    }
    /deep/ .custom-field{
      background: rgba(241, 241, 242, .5);
      padding-top:6px;
      padding-bottom: 6px;
      min-height: 36px;
    }
  }
</style>
